<template>
  <SplitPanel class="dictionary">
    <template #left-content>
      <div class="mySearch">
        <a-input-search
          v-model:value="value"
          placeholder="可输入项目名称"
          enter-button="查询"
          @search="onSearch"
        />
      </div>
      <div class="title">项目列表</div>
      <a-menu
        id="dddddd"
        v-model:openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        style="width: 240px"
        mode="inline"
        :items="dictionData"
        @click="handleClickItem"
      ></a-menu>
    </template>
    <template #right-content>
      <a-tabs class="all-tabs" v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="待检测任务">
          <DynamicTable
            bordered
            :data-request="loadData"
            :columns="columns"
            row-key="id"
            @resize-column="handleResizeColumn"
            :scroll="{
              y: 'calc(100vh - 380px)',
            }"
            :row-selection="rowSelection"
          >
            <template #expandedRowRender>
              <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
              </a-table>
            </template>
            <template #toolbar>
              <a-button type="primary" @click="openUserModal({})"> 批量派发 </a-button>
              <a-button @click="openUserModal({})"> 批量创建任务 </a-button>
            </template>
          </DynamicTable>
        </a-tab-pane>
        <a-tab-pane key="2" tab="已检测任务" force-render>
          <DynamicTable
            bordered
            :data-request="loadData2"
            :columns="columns2"
            row-key="id"
            @resize-column="handleResizeColumn"
            :scroll="{
              y: 'calc(100vh - 380px)',
            }"
            :row-selection="rowSelection"
          >
            <template #expandedRowRender>
              <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
              </a-table>
            </template>
            <template #toolbar>
              <a-button type="primary" @click="openUserModal({})"> 编制报告 </a-button>
            </template>
          </DynamicTable>
        </a-tab-pane>
      </a-tabs>
    </template>
  </SplitPanel>
</template>
<script setup lang="ts">
  import { ref, reactive } from 'vue';
  import { SplitPanel } from '@/components/basic/split-panel';
  import { baseColumns, baseColumns2, innerColumns, type TableListItem } from './columns';
  import { getTableListApi } from '@/api/base/dictionary/index';
  import {
    useTable,
    type OnChangeCallbackParams,
    type TableColumn,
  } from '@/components/core/dynamic-table';
  import type { TableRowSelection } from 'ant-design-vue/es/table/interface';

  const [DynamicTable, dynamicTableInstance] = useTable();
  const activeKey = ref('1');

  const value = ref<string>('');
  const onSearch = (searchValue: string) => {
    console.log('use value', searchValue);
    console.log('or use this.value', value.value);
  };
  const innerData = [
    {
      id: '1',
      userNum: 'BH1024666511',
      userLogin: '混泥土',
      type3: '1',
      userName: '4月第一次',
      action: '混泥土',
      operationTime: '3天',
    },
    {
      id: '2',
      userNum: 'BH1024666511',
      userLogin: '混泥土',
      type3: '1',
      userName: '4月第一次',
      action: '混泥土',
      operationTime: '3天',
    },
  ];
  const columns: TableColumn[] = [
    ...baseColumns,
    {
      title: '操作',
      align: 'left',
      width: 270,
      dataIndex: 'ACTION',
      actions: ({ record }) => [
        {
          ifShow: record.type == '1',
          label: '派发',
          onClick: () => console.log('111'),
        },
        {
          ifShow: record.type == '2' || record.type == '3',
          label: '详情',
          onClick: () => console.log('111'),
        },
        {
          ifShow: record.type == '1',
          label: '仪器方法',
          onClick: () => console.log('111'),
        },
        {
          ifShow: record.type == '1',
          label: '试剂申请',
          onClick: () => console.log('111'),
        },
        {
          ifShow: record.type == '1' || record.type == '3',
          label: '数据录入',
          onClick: () => console.log('111'),
        },
      ],
    },
  ];
  const columns2: TableColumn[] = [
    ...baseColumns2,
    {
      title: '操作',
      align: 'left',
      width: 100,
      dataIndex: 'ACTION',
      actions: ({ record }) => [
        {
          label: '详情',
          onClick: () => console.log('111'),
        },
      ],
    },
  ];
  const selectedKeys = ref<string[]>(['dept_type']);
  const openKeys = ref<string[]>(['dept_type']);
  const dictionData = [
    {
      key: 'dept_type',
      label: '湖南海曙科技高光公司',
    },
    {
      key: 'task_type',
      label: '天宝百利制造公司',
    },
    {
      key: 'check_type',
      label: '万泰世纪制造公司',
    },
    {
      key: 'check_mode',
      label: '拓达科能制造公司',
    },
    {
      key: 'from_type',
      label: '同力紫光制造公司',
    },
  ];
  const configType = ref('dept_type');

  const loadData = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = {
      current: 1,
      orders: [],
      pages: 1,
      records: [
        {
          id: '1',
          userNum: 'BH1024666511',
          userLogin: '湖南海曙科技高光公司第一次检测',
          type: '1',
          userName: '张三',
        },
        {
          id: '2',
          userNum: 'BH1024666511',
          userLogin: '湖南海曙科技高光公司第一次检测',
          type: '1',
          userName: '张三',
        },
        {
          id: '3',
          userNum: 'BH1024666511',
          userLogin: '湖南海曙科技高光公司第一次检测',
          type: '2',
          userName: '张三',
        },
        {
          id: '4',
          userNum: 'BH1024666511',
          userLogin: '湖南海曙科技高光公司第一次检测',
          type: '3',
          userName: '张三',
        },
      ],
      searchCount: true,
      size: 10,
      total: 4,
    };

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };
  const loadData2 = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = {
      current: 1,
      orders: [],
      pages: 1,
      records: [
        {
          id: '1',
          userNum: 'BH1024666511',
          userLogin: '湖南海曙科技高光公司第一次检测',
          type: '4',
          userName: '张三',
        },
        {
          id: '2',
          userNum: 'BH1024666511',
          userLogin: '湖南海曙科技高光公司第一次检测',
          type: '4',
          userName: '张三',
        },
        {
          id: '3',
          userNum: 'BH1024666511',
          userLogin: '湖南海曙科技高光公司第一次检测',
          type: '4',
          userName: '张三',
        },
        {
          id: '4',
          userNum: 'BH1024666511',
          userLogin: '湖南海曙科技高光公司第一次检测',
          type: '4',
          userName: '张三',
        },
      ],
      searchCount: true,
      size: 10,
      total: 4,
    };

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  const handleResizeColumn = (w, col) => {
    col.width = w;
  };

  const handleClickItem = (e) => {
    dynamicTableInstance?.reload?.();
  };
  const selectedFileList = ref<API.File[]>([]);

  const openUserModal = async (record: Partial<TableListItem> = {}) => {};
  const rowSelection = reactive<TableRowSelection<API.NetdiskManageListItem>>({
    selectedRowKeys: [],
    onChange: (selectedRowKeys: Key[], selectedRows) => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      rowSelection.selectedRowKeys = selectedRowKeys;
      selectedFileList.value = selectedRows.map((n) => ({ type: n.type, name: n.name }));
    },
  });
</script>
<style scoped lang="less">
  .dictionary {
    padding: 20px;
    .ant-menu-light.ant-menu-root.ant-menu-inline,
    .ant-menu-light.ant-menu-root.ant-menu-vertical {
      border-inline-end: 0;
    }
    .mySearch {
      padding: 20px 20px 20px 10px;
    }
    .title {
      font-size: 16px;
      font-weight: 600;
      padding-left: 10px;
      margin-bottom: 10px;
    }
  }
</style>
